<template>
  <div class="vue-container">
    <common-form
      ref="commonForm"
      :disabled="disabled"
      :options="options"
      @handlerClick="handlerClick"
      @advancedSearch="handlerQuery"
    >
      <template slot="advanced-content">
        <el-form ref="advancedForm" style="margin-top: 20px;" :model="queryForm" label-width="100px">
          <el-form-item label="登录浏览器">
            <el-input v-model="queryForm.browser" clearable />
          </el-form-item>
          <el-form-item label="操作系统">
            <el-input v-model="queryForm.os" clearable />
          </el-form-item>
          <el-form-item label="登录时间">
            <el-date-picker
              v-model="queryForm.createTime"
              style="width: 100%;"
              type="datetimerange"
              placeholder="选择时间"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-form>
      </template>
    </common-form>
    <common-table
      :table-data="data"
      :columns="columns"
      :height="height"
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :total="totalPage"
      :loading="loading"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @handleSelectionChange="handleSelectionChange"
    >
      <!-- 列表序号 -->
      <template #serialNumber="scope">
        <span>{{
          Number(scope.index + 1) + (queryForm.pageNum - 1) * queryForm.pageSize
        }}</span>
      </template>
      <!-- 登录时间 -->
      <template #createTime="scope">
        {{ scope.row.createTime | formatTime }}
      </template>
      <!-- 列表操作按钮-->
      <template #operation="scope">
        <el-button
          v-throttle
          v-permission="'ops:blacklist:create'"
          :size="size"
          type="text"
          icon="el-icon-circle-plus"
          @click.stop="handlerAddToBlacklist(scope.row)"
        >加入黑名单</el-button><br>
        <el-button
          v-throttle
          v-permission="'ops:online:user:kickout'"
          :size="size"
          type="text"
          icon="el-icon-right"
          class="danger-btn"
          @click.stop="handleKickout(scope.row)"
        >强制下线</el-button>
      </template>
    </common-table>
    <!--加入黑名单组件-->
    <add-to-blacklist ref="addToBlacklist" />
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin'
import AddToBlacklist from '@/components/AddToBlacklist'
export default {
  name: 'OnlineUser',
  components: { AddToBlacklist },
  mixins: [mixin],
  data() {
    return {
      blacklistDialog: false, // 加入黑名单表单弹窗
      blacklistForm: {}, // 加入黑名单表单
      // 表头数组
      columns: [
        {
          type: 'selection',
          width: '60'
        },
        {
          prop: 'number',
          label: '序号',
          width: '70',
          type: 'slot',
          slotType: 'serialNumber'
        },
        {
          prop: 'username',
          align: 'center',
          label: '登录用户账号'
        },
        {
          prop: 'ip',
          align: 'center',
          width: '150',
          label: 'IP地址'
        },
        {
          prop: 'browser',
          align: 'center',
          label: '登录浏览器'
        },
        {
          prop: 'os',
          align: 'center',
          label: '操作系统'
        },
        {
          prop: 'engine',
          align: 'center',
          label: '浏览器引擎'
        },
        {
          prop: 'addr',
          align: 'center',
          width: '200',
          label: '登录地址'
        },
        {
          prop: 'createTime',
          align: 'center',
          type: 'slot',
          width: '180',
          slotType: 'createTime',
          label: '登录时间'
        },
        {
          type: 'slot',
          prop: 'operation',
          label: '操作',
          width: '168',
          slotType: 'operation',
          align: 'center',
          fixed: 'right'
        }
      ],
      // 顶部表单按钮组
      options: [{
        type: 'button',
        icon: 'el-icon-refresh',
        handler: 'handlerRefresh',
        float: 'left',
        class: 'refreshBtn',
        text: '刷新'
      },
      {
        type: 'button',
        handler: 'handlerAdvanced',
        class: 'refreshBtn',
        permission: 'page',
        advanced: true,
        float: 'right',
        text: '高级查询'
      },
      {
        type: 'button',
        handler: 'handlerReset',
        permission: 'page',
        float: 'right',
        class: 'infoBtn',
        text: '重置'
      },
      {
        type: 'button',
        handler: 'handlerQuery',
        permission: 'page',
        float: 'right',
        text: '查询',
        btnType: 'primary'
      },
      {
        type: 'search',
        handler: 'handlerQuery',
        permission: 'page',
        bindValue: '',
        float: 'right',
        label: 'keyword',
        placeholder: '输入关键字搜索'
      }
      ]
    }
  },
  async created() {
  },
  methods: {
    // 打开加入黑名单弹窗
    handlerAddToBlacklist(item) {
      const row = {
        type: 2,
        ip: item.ip,
        username: item.username
      }
      this.$refs.addToBlacklist.openDialog(row)
    },
    // 强制下线用户
    handleKickout(row) {
      this.$confirm('此操作将使该用户退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.funs['kickout'](row.id).then(res => {
          this.$message.success('操作成功')
          this.getList()
        })
      }).catch(() => {

      })
    }
  }
}
</script>
